<template>
  <div class="transaction-list">
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
      <el-skeleton :rows="3" animated style="margin-top: 20px" />
    </div>
    
    <el-empty v-else-if="!data || data.length === 0" description="暂无交易记录" />
    
    <div v-else class="transaction-cards">
      <el-card 
        v-for="item in data" 
        :key="item.id" 
        class="transaction-card"
        shadow="hover"
      >
        <div class="transaction-header">
          <div class="transaction-id">交易编号: {{ item.id }}</div>
          <div class="transaction-status">
            <el-tag :type="getTransactionStatusType(item.status)">
              {{ formatTransactionStatus(item.status) }}
            </el-tag>
          </div>
        </div>
        
        <div class="transaction-body">
          <div class="car-info" v-if="item.car">
            <div class="car-image">
              <el-image 
                src="https://via.placeholder.com/120x80?text=Car"
                fit="cover"
              />
            </div>
            <div class="car-details">
              <div class="car-brand">{{ item.car.carBrand }}</div>
              <div class="car-number">{{ item.car.carNumber }}</div>
            </div>
          </div>
          <div class="car-info" v-else>
            <div class="car-image">
              <el-image 
                src="https://via.placeholder.com/120x80?text=Car"
                fit="cover"
              />
            </div>
            <div class="car-details">
              <div class="car-brand">未知车辆</div>
              <div class="car-number">车辆ID: {{ item.carId }}</div>
            </div>
          </div>
          
          <div class="dealer-info" v-if="item.dealer">
            <div class="dealer-name">{{ item.dealer.dealerName }}</div>
            <div class="dealer-contact">联系人: {{ item.dealer.contactPerson }}</div>
          </div>
          <div class="dealer-info" v-else>
            <div class="dealer-name">未知经销商</div>
            <div class="dealer-contact">经销商ID: {{ item.dealerId }}</div>
          </div>
          
          <div class="price-info">
            <div class="price">{{ formatPrice(item.price) }}</div>
            <div class="payment-status">
              <el-tag size="small" :type="getPaymentStatusType(item.paymentStatus)">
                {{ formatPaymentStatus(item.paymentStatus) }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div class="transaction-footer">
          <div class="transaction-date">交易日期: {{ formatDate(item.transactionDate) }}</div>
          <div class="transaction-actions">
            <el-button link type="primary" @click="viewTransaction(item)">查看详情</el-button>
            <el-button 
              v-if="item.status === 0 && item.paymentStatus === 0" 
              link 
              type="success" 
              @click="payTransaction(item)"
            >
              去支付
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { 
  formatPaymentStatus as formatPaymentStatusUtil,
  formatTransactionStatus as formatTransactionStatusUtil
} from '@/api/transaction'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['view', 'pay'])

// 查看交易详情
const viewTransaction = (transaction) => {
  emit('view', transaction)
}

// 支付交易
const payTransaction = (transaction) => {
  emit('pay', transaction)
}

// 格式化支付状态
const formatPaymentStatus = (status) => {
  return formatPaymentStatusUtil(status)
}

// 格式化交易状态
const formatTransactionStatus = (status) => {
  return formatTransactionStatusUtil(status)
}

// 获取支付状态对应的标签类型
const getPaymentStatusType = (status) => {
  const statusMap = {
    0: 'warning',
    1: 'success',
    2: 'info'
  }
  return statusMap[status] || 'info'
}

// 获取交易状态对应的标签类型
const getTransactionStatusType = (status) => {
  const statusMap = {
    0: 'primary',
    1: 'success',
    2: 'danger'
  }
  return statusMap[status] || 'info'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString()
}

// 格式化价格
const formatPrice = (price) => {
  if (price === undefined || price === null) return '¥0.00'
  return `¥${Number(price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
}
</script>

<style scoped>
.transaction-list {
  width: 100%;
}

.loading-container {
  padding: 20px;
}

.transaction-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.transaction-card {
  margin-bottom: 0;
}

.transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.transaction-id {
  font-size: 14px;
  color: #666;
}

.transaction-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.car-info {
  display: flex;
  align-items: center;
  width: 40%;
}

.car-image {
  margin-right: 10px;
  width: 120px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}

.car-details {
  display: flex;
  flex-direction: column;
}

.car-brand {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.car-number {
  font-size: 14px;
  color: #666;
}

.dealer-info {
  width: 30%;
}

.dealer-name {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dealer-contact {
  font-size: 13px;
  color: #666;
}

.price-info {
  width: 20%;
  text-align: right;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
  margin-bottom: 5px;
}

.transaction-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #e6e6e6;
}

.transaction-date {
  font-size: 13px;
  color: #666;
}

.transaction-actions {
  display: flex;
  gap: 10px;
}
</style> 